.f-section {
    position: relative;
    overflow-x: hidden;
    --resizer-color: #154EF250;
}

.f-section.dragging * {
    user-select: none;
    --resizer-color: #154EF2;
}

.f-section.active .line {
    position: absolute;
    top: 0;
    height: 100%;
    width: 1px;
    background-color: #c9c9c921;
    opacity: 0;
    pointer-events: none;
}

.f-section.dragging .line {
    opacity: 1;
}
.f-section.active [data-cols] {
    transition: all 0.3s ease;
    position: relative;
    /* box-shadow: 0 0 0 1px rgba(161, 161, 161, 0.459); */
}  

.f-section.active .resizer-handle {
    position: absolute;
    z-index: 1;
    top: 50%;
    /* height: 100%; */
    right: -24px;
    width: 48px;
    height: 48px;
    transform: translate(0, -50%);
    cursor:col-resize;
}

.f-section.active .resizer-handle::before {
    content: '';
    position:absolute;
    transition: all 0.3s ease;
    border-radius: 50px;
    opacity: 0;
    display: block;
    right: 19px;
    top: 50%;
    bottom: 50%;
    width: 12px;
    height: 12px;
    transform: translate(0,-50%);
    background-color: white;
    border: 2px solid var(--resizer-color);
}

.f-section.active .resizer-handle::after {
    content: '';
    position:absolute;
    transition: all 0.3s ease;
    opacity: 0;
    display: block;
    /* right: 19px; */
    background-color: var(--resizer-color);
    top: 50%;
    transform: translate(0, -50%);
    bottom: 50%;
    height: 2px;
    width: 2px;
    left: 22px;
}

.f-section.active:has(.dragging) {
    cursor: col-resize;
}

.f-section.active .resizer-handle.dragging::before,
.f-section.active .resizer-handle:hover::before,
.f-section.active .resizer-handle.dragging::after,
.f-section.active .resizer-handle:hover::after,
.f-section.active .f-plugin-container:hover .resizer-handle::before {
    opacity: 1;
}

.f-section.active .resizer-handle.dragging::before,
.f-section.active .resizer-handle:hover::before {
    height: 32px;
}

.f-section.active .resizer-handle.dragging::after,
.f-section.active .resizer-handle:hover::after {
    height: 20px;
}

.f-plugin-container:has(.resizer-handle.dragging) .f-plugin-container-content {
    border-color: var(--resizer-color);
}
